<template>
	<view class="xq-yue">
		<!-- 导航栏 -->
		<view class="nav">
			<image src="/static/137/800.png" mode="" @click="toBack"></image>
			<image src="../../static/static/137/shoucang.png" mode="" @click="Shujia"></image>
		</view>
		<view class="fengge"></view>
		<!-- 卡片 -->
		<view class="card">
			<view class="card-left">
				<image :src="shulist.imgSrc" mode=""></image>
			</view>
			<view class="card-center">
				<view class="card-title">{{shulist.title}}</view>
				<view class="card-author item">{{shulist.author}}</view>
				<view class="card-gen item">{{shulist.geng}}</view>
				<view class="card-end item">{{shulist.ziShu}}</view>
			</view>
			<view class="card-right" @click="toShuJia">
				<button type="default" size="mini">+书架</button>
			</view>
		</view>
		<!-- 内容 -->
		<view class="content">
			<u-read-more :toggle="true" show-height="200" color="#E60606" :shadow-style="{backgroundImage:'none'}" close-text="展开全部">
				<rich-text :nodes="shulist.desc" class="con-tent"></rich-text>
			</u-read-more>
		</view>
		<!-- 目录 -->
		<view class=" catalog">
			<!-- 目录 -->
			<u-sticky offset-top="148" :enable="enable" z-index="999">
				<view class="cat-nav">
					<view class="cat-left">
						<text class="cat-title">目录</text>
						<text class="left">连载中</text>
					</view>
					<view class="cat-right" @click="paiXu">
							<view v-show="show">
								<image src="/static/137/dao.png" mode=""></image>
								<text>倒序</text>
							</view>
							<view v-show="!show">
								<image src="/static/137/zeng.png" mode=""></image>
								<text>正序</text>
							</view>
					</view>
				</view>
			</u-sticky>
			<view class="cat-zx">
				<!-- 最新章节 -->
				<view class="zuixin" @click="yueDuYe">
					<view class="zuixin-flex bgc">
						<view class="z-tit">{{list01[list01.length - 1].title}}</view>
						<view class="gary">免费</view>
					</view>
				</view>
				<!-- 章节目录 -->
				<view class="zuixin" v-for="(item,index) in list" :key="index" @click="yueDuYe">
					<view class="zuixin-flex">
						<view class="x-tit">{{item.title}}</view>
						<view class="gary">{{item.free}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="xq-btn">
			<view class="btn" @click="yueDuYe">
				立即阅读
			</view>
		</view>
	</view>
</template>x

<script>
	export default {
		data() {
			return {
				show:true, //正续和倒序的切换
				enable:false,
				list:[
					{title:"第1章 塞翁失虎，焉知非福啊啊啊啊啊啊",free:"免费"},
					{title:"第2章 以退为进",free:"免费"},
					{title:"第3章 这里蛋妖气",free:"免费"},
					{title:"第4章 等等，你到底是谁？",free:"免费"},
					{title:"第5章 周明府是何来头",free:"免费"},
					{title:"第6章 咦，这人看着眼熟",free:"免费"},
					{title:"第7章 生活不止眼前的苟且",free:"免费"},
					{title:"第1章 塞翁失虎，焉知非福啊啊啊啊啊啊",free:"免费"},
					{title:"第2章 以退为进",free:"免费"},
					{title:"第3章 这里蛋妖气",free:"免费"},
					{title:"第4章 等等，你到底是谁？",free:"免费"},
					{title:"第5章 周明府是何来头",free:"免费"},
					{title:"第6章 咦，这人看着眼熟",free:"免费"},
					{title:"第7章 生活不止眼前的苟且",free:"免费"}
				], //目录
				list01:[
					{title:"第1章 塞翁失虎，焉知非福啊啊啊啊啊啊",free:"免费"},
					{title:"第2章 以退为进",free:"免费"},
					{title:"第3章 这里蛋妖气",free:"免费"},
					{title:"第4章 等等，你到底是谁？",free:"免费"},
					{title:"第5章 周明府是何来头",free:"免费"},
					{title:"第6章 咦，这人看着眼熟",free:"免费"},
					{title:"第7章 生活不止眼前的苟且",free:"免费"}
				], //目录
				shulist:{
						imgSrc:'/static/temp/item1.png',
						title:'陋室铭',
						geng:"更新至1288章",
						author:"刘禹锡 著",
						ziShu:"字数：128.90万字",
						show:false,
						desc:`山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
						苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
						无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？
						山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
						苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
						无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？”
						山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
						苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
						无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？
						山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
						苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
						无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？
						山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
						苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
						无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？
						山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
						苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
						无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？”
						山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
						苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
						无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？
						山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
						苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
						无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`
				},//书本信息
			}
		},
	  // 在对应的show和hide页面生命周期中打开或关闭监听
		onShow() {
			this.enable= true
		},
		onHide() {
			this.enable= false
		},
		methods: {
			toBack(){  //返回上一级
				// console.log(111)
				uni.navigateBack({
					delta:1
				})
			},
			paiXu(){ //目录排序
				//console.log(111)
				this.show =! this.show;
				this.list.reverse();
			},
			toShuJia(){  //原添加书本功能
				//console.log(111)
				let _this = this
				let newData = {src:this.shulist.imgSrc,title:this.shulist.title,show:false};
				uni.showModal({  //模态框
				    title: '提示',
				    content: '确定加入书架么？',
				    success: function (res) {
				        if (res.confirm) {
				            //console.log('用户点击确定');
							//_this.newList = newData;
							// uni.setStorage({
							//     key: 'storage_key',
							//     data:newData,
							//     success: function () {
							//         console.log('success');
							// 		uni.showToast({
							// 		    title: '添加成功！',
							// 		    duration: 2000
							// 		});
							//     }
							// });
							try { //将数据缓存到本地
							    uni.setStorageSync('storage_key', newData);
								uni.showToast({
									title: '添加成功！',
									duration: 2000
								});
							} catch (e) {
							    // error
							}
							
				        } else if (res.cancel) {
				            //console.log('用户点击取消');
				        }
				    }
				});
			},
			yueDuYe(){
				//console.log(111)
				//进入阅读页,然后将数据进行本地缓存
				uni.setStorage({
				    key: 'yuedu',
				    data: this.shulist,
				    success: function () {
				        //console.log('success');
						uni.navigateTo({
							url:"../yuedu/yuedu"
						})
				    }
				});
			},
			Shujia(){   //跳转到书架页
				uni.switchTab({
					url:'../shujia/shujia'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.xq-yue{
	.fengge{
		height: 148rpx;
	}
	.nav{
		display: flex;
		justify-content: space-between;
		padding: 50rpx 40rpx;
		background-color: #fff;
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 99;
		height: 148rpx;
		image{
			width: 56rpx;
			height: 56rpx;
		}
	}
	.card{
		display: flex;
		height: 280rpx;
		// background-color: #4CD964;
		border-bottom: 36rpx solid #F6F6F6;
		.card-left{
			margin-left: 36rpx;
			image{
				width: 134rpx;
				height: 180rpx;
				opacity: 0.75;
			}
		}
		.card-center{
			margin-left: 27rpx;
			width: 40%;
			.card-title{
				font-size: 30rpx;
				font-family: Microsoft YaHei;
				font-weight: bold;
				color: #000000;
				line-height: 50rpx;
			}
			.item{
				font-size: 24rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #A7A7A7;
				line-height: 50rpx;
			}
		}
		.card-right{
			margin-left: 30rpx;
			button{
				width: 156rpx;
				height: 58rpx;
				background: #E60606;
				color: #fff;
				margin-top: 150rpx;
			}
		}
	}
	.content{
		padding: 37rpx;
		border-bottom: 36rpx solid #F6F6F6;
		.con-tent{
			width: 678rpx;
			font-size: 38rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #939393;
			line-height: 50rpx;
			// overflow: hidden;
		}
		// .con-btn{
		// 	font-size: 24rpx;
		// 	font-family: Microsoft YaHei;
		// 	font-weight: 400;
		// 	color: #E60606;
		// 	line-height: 50rpx;
		// 	text-align: center;
		// 	margin-top: 20rpx;
		// }
	}
	.catalog{
		.cat-nav{
			padding: 20rpx 0 26rpx 34rpx;
			display: flex;
			justify-content: space-between;
			background-color: #fff;
			height: 88rpx;
			.cat-left{
				text{
					font-size: 24rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #BFBFBF;
					line-height: 50rpx;
				}
				.cat-title{
					font-size: 36rpx;
					font-family: Microsoft YaHei;
					font-weight: bold;
					color: #272727;
					line-height: 50rpx;
				}
				.left{
					margin-left: 19rpx;
				}
			}
			.cat-right{
				margin-right: 34rpx;
				text{
					font-size: 24rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #BFBFBF;
					line-height: 50rpx;
				}
				image{
					width: 28rpx;
					height: 24rpx;
					// margin-top: 20rpx;
				}
			}
		}
		.cat-zx{
			// padding: 0;
			// margin: 0;
			padding-bottom: 130rpx;
			// height: 88rpx;
			.zuixin{
				line-height: 80rpx;
				view{
					font-size: 24rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #000000;
				}
				.zuixin-flex{
					display: flex;
					justify-content: space-between;
					padding: 0 34rpx;
					box-sizing: border-box;
					.gary{
						color: #BFBFBF;
					}
				}
				.bgc{
					background: #F6F6F6;
				}
				.z-tit{
					font-size: 24rpx;
					color: #E60606;
				}
				.x-tit{
					font-size: 24rpx;
				}
			}
			
		}
		
	}
	.xq-btn{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		.btn{
			width: 750rpx;
			height: 128rpx;
			background: #E60606;
			color: #fff;
			font-size: 42rpx;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 120rpx;
			border: none;
			text-align: center;
		}
	}
}
</style>
